<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="renderer" content="webkit" />
<link href="<%=basePath%>css/bootstrap.min.css" rel="stylesheet" />
<link href="<%=basePath%>font-awesome/css/font-awesome.css"
	rel="stylesheet" />
<!-- Data Tables -->
<link
	href="<%=basePath%>css/plugins/dataTables/dataTables.bootstrap.css"
	rel="stylesheet" />
<link href="<%=basePath%>css/animate.css" rel="stylesheet" />
<link href="<%=basePath%>css/style.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css"
	href="<%=basePath%>js/flavr/flavr/css/animate.css" />
<link rel="stylesheet" type="text/css"
	href="<%=basePath%>js/flavr/flavr/css/flavr.css" />
<link rel="stylesheet"
	href="<%=basePath%>js/zTree_v3/css/zTreeStyle/zTreeStyle.css"
	type="text/css" />
<link rel="stylesheet" type="text/css" href="<%=basePath%>js/webuploader-0.1.5/webuploader.css">

<style>
.btn-circle {
	width: 20px;
	height: 20px;
	border-radius: 10px;
}

.fa {
	position: relative;
	top: -3px;
}
</style>
</head>

<body>
	<div id="wrapper">
		<nav class="navbar-default navbar-static-side" role="navigation">
			<div class="sidebar-collapse">
				<ul class="nav" id="side-menu">

					<jsp:include page="../header.jsp" flush="true"></jsp:include>

					<li><a href="javascript:void(0)"><i
							class="fa fa fa-volume-up"></i> <span class="nav-label">文章管理</span>
							<span class="fa arrow"></span> </a>
						<ul class="nav nav-second-level">
							<li><a href="<%=basePath%>admin/article/list">文章列表</a></li>
						</ul></li>

					<li class="active"><a href="javascript:void(0)"><i
							class="fa fa fa-volume-up"></i> <span class="nav-label">栏目管理</span>
							<span class="fa arrow"></span> </a>
						<ul class="nav nav-second-level">
							<li><a href="<%=basePath%>admin/category/list">栏目列表</a></li>
						</ul></li>
					<li><a href="javascript:void(0)"><i
							class="fa fa fa-qrcode"></i> <span class="nav-label">标签管理</span>
							<span class="fa arrow"></span> </a>
						<ul class="nav nav-second-level">
							<li class="active"><a href="<%=basePath%>admin/tag/list">标签列表</a>
							</li>
						</ul></li>
					<li><a href="javascript:void(0)"><i
							class="fa fa fa-qrcode"></i> <span class="nav-label">合作伙伴管理</span>
							<span class="fa arrow"></span> </a>
						<ul class="nav nav-second-level">
							<li><a href="<%=basePath%>admin/friend/list">合作伙伴列表</a></li>
						</ul></li>
				</ul>

			</div>
		</nav>

		<div id="page-wrapper" class="gray-bg dashbard-1">
			<div class="row wrapper border-bottom white-bg page-heading">
				<div class="col-lg-10">
					<h2>栏目列表</h2>
					<ol class="breadcrumb">
						<li><a href="<%=basePath%>admin/home">主页</a></li>
						<li><a>栏目管理</a></li>
						<li><strong>栏目列表</strong></li>
					</ol>
				</div>
				<div class="col-lg-2"></div>
			</div>
			<div class="wrapper wrapper-content animated fadeInRight">
				<div class="row">
					<div class="col-lg-12">
						<div class="ibox float-e-margins">
							<div class="ibox-content">
								<div class="row">
									<form class="form-inline">
										<div class="col-sm-3">
											<div class="input-group">
												<input type="text" id="keyword" placeholder="请输入栏目名称"
													class="input-sm form-control" /> <span
													class="input-group-btn">
													<button type="button" class="btn btn-sm btn-primary"
														onclick="search()">搜索</button>
												</span>
											</div>
										</div>
										<button type="button" class="btn btn-sm btn-danger"
											onclick="addCategory()">新增栏目</button>
									</form>
								</div>

								<!-- 表格数据 -->
								<div id="dataList"></div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<jsp:include page="../footer.jsp" flush="true"></jsp:include>

		</div>
	</div>


	<!-- 编辑页面 -->
	<div class="modal inmodal" id="editCategoryModal" tabindex="-1"
		role="dialog" aria-hidden="true">
		<div class="modal-dialog">
			<div id="editCategoryContent" class="modal-body"></div>
		</div>
	</div>


	<!-- 新增页面 -->
	<div class="modal inmodal" id="addCategoryModal" tabindex="-1"
		role="dialog" aria-hidden="true">
		<div class="modal-dialog">
			<div id="addCategoryContent" class="modal-body"></div>
		</div>
	</div>

	<!-- Mainly scripts -->
	<script src="<%=basePath%>js/jquery-2.1.1.min.js"></script>
	<script src="<%=basePath%>js/bootstrap.min.js"></script>
	<script src="<%=basePath%>js/plugins/metisMenu/jquery.metisMenu.js"></script>
	<script
		src="<%=basePath%>js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
	<script src="<%=basePath%>js/hplus.js"></script>
	<script src="<%=basePath%>js/plugins/pace/pace.min.js"></script>
	<script src="<%=basePath%>js/validation.js"></script>
	<script src="<%=basePath%>js/category/category.js"></script>
	<script type="text/javascript"
		src="<%=basePath%>js/flavr/flavr/js/flavr.min.js"></script>
	<script type="text/javascript" src="<%=basePath%>js/flavr/base.js"></script>
	<script type="text/javascript"
		src="<%=basePath%>js/zTree_v3/js/jquery.ztree.all-3.5.js"></script>
	<script type="text/javascript" src="<%=basePath%>js/webuploader-0.1.5/webuploader.js"></script>
	<script type="text/javascript">
	// 初始化Web Uploader
	var uploader = WebUploader.create({

	    // 选完文件后，是否自动上传。
	    auto: true,

	    // swf文件路径
	    swf: "<%=basePath%>js/Uploader.swf",

	    // 文件接收服务端。
	    server: "<%=basePath%>upload",

	    // 选择文件的按钮。可选。
	    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
	    pick: '#filePicker',

	    // 只允许选择图片文件。
	    accept: {
	        title: 'Images',
	        extensions: 'gif,jpg,jpeg,bmp,png',
	        mimeTypes: 'image/*'
	    }
	});
	uploader.on( 'fileQueued', function( file ) {
	    var $li = $(
	            '<div id="' + file.id + '" class="file-item thumbnail">' +
	                '<img>' +
	                '<div class="info">' + file.name + '</div>' +
	            '</div>'
	            ),
	        $img = $li.find('img');


	    // $list为容器jQuery实例
	    $list.append( $li );

	    // 创建缩略图
	    // 如果为非图片文件，可以不用调用此方法。
	    // thumbnailWidth x thumbnailHeight 为 100 x 100
	    uploader.makeThumb( file, function( error, src ) {
	        if ( error ) {
	            $img.replaceWith('<span>不能预览</span>');
	            return;
	        }

	        $img.attr( 'src', src );
	    }, thumbnailWidth, thumbnailHeight );
	});
	// 文件上传过程中创建进度条实时显示。
	uploader.on( 'uploadProgress', function( file, percentage ) {
	    var $li = $( '#'+file.id ),
	        $percent = $li.find('.progress span');

	    // 避免重复创建
	    if ( !$percent.length ) {
	        $percent = $('<p class="progress"><span></span></p>')
	                .appendTo( $li )
	                .find('span');
	    }

	    $percent.css( 'width', percentage * 100 + '%' );
	});

	// 文件上传成功，给item添加成功class, 用样式标记上传成功。
	uploader.on( 'uploadSuccess', function( file ) {
	    $( '#'+file.id ).addClass('upload-state-done');
	});

	// 文件上传失败，显示上传出错。
	uploader.on( 'uploadError', function( file ) {
	    var $li = $( '#'+file.id ),
	        $error = $li.find('div.error');

	    // 避免重复创建
	    if ( !$error.length ) {
	        $error = $('<div class="error"></div>').appendTo( $li );
	    }

	    $error.text('上传失败');
	});

	// 完成上传完了，成功或者失败，先删除进度条。
	uploader.on( 'uploadComplete', function( file ) {
	    $( '#'+file.id ).find('.progress').remove();
	});
	</script>
</body>

</html>
